@import "../../_common_sass/base";

.sponsor {
    .sponsor-head {
        position: fixed;
        width: px2rem(750px);
        height: px2rem(300px);
        overflow: hidden;
        top: 0;
        z-index: 999;
        padding: px2rem(75px) px2rem(40px);
        background-color: #fff;
        @extend .clearfix;
        .wall-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .avatar-box {
            position: relative;
            z-index: 1;
            float: left;
            img {
                width: px2rem(150px);
                height: px2rem(150px);
                border: px2rem(4px) solid rgba(255, 255, 255, .5);
            }
            .icon-vip {
                width: px2rem(40px);
                height: px2rem(40px);
            }
        }
        .sponsor-name {
            position: relative;
            margin-left: px2rem(20px);
            z-index: 1;
            float: left;
            h5 {
                margin-top: px2rem(10px);
                color: #fff;
                font-size: px2rem(32px);
            }
            .follow-btn {
                display: inline-block;
                width: px2rem(140px);
                height: px2rem(56px);
                margin-top: px2rem(20px);
                background-image: url(../../../containers/_common_img/sponsor/follow-button.png);
                background-size: cover;
                &.followed{
                    background-image: url(../../../containers/_common_img/sponsor/followed-button.png);
                }
            }
        }

    }
    .sponsor-body{

        padding-top: px2rem(420px);

        .tab-btn{
            position: fixed;
            top:px2rem(300px);
            width: 100%;
            z-index: 999;
            background-color: #fff;
            line-height:px2rem(90px);
            font-size: px2rem(28px);
            text-align: center;
            .tab-item{
                display: inline-block;
                padding: 0 px2rem(20px);
                margin: 0 px2rem(40px);
                &.cur{
                    border-bottom: 3px solid $blue;
                }
            }
        }
        .tab-content{
            .no-login{
                text-align: center;
                padding-top:px2rem(30px);
                font-size: px2rem(30px);
                a{
                    color: $blue;
                    margin-right: px2rem(10px);
                }
            }
        }
        .home-page{
            .photo-list{
                img{
                    width: 31.3%;
                    margin: 0 1%;
                }
            }
        }
        .act-list{
            li {
                position: relative;
                margin-bottom: .24rem;
                background-color: #fff;
                padding-left: .32rem;
                .act-body {
                    display: block;
                    padding: .32rem 0;

                    @extend .clearfix;
                    img {
                        float: left;
                        width: 1.52rem;
                        height: 1.52rem;
                    }
                    .text {
                        float: left;
                        margin-left: 0.32rem;
                        width: 4rem;
                        h5 {
                            margin-bottom: .16rem;
                            color: $text-color-3;
                            font-size: px2rem(32px);
                        }
                        p {
                            color: $text-color-9;
                            &.address {
                                &:before {
                                    content: '';
                                    display: inline-block;
                                    width: px2rem(18px);
                                    height: px2rem(24px);
                                    margin: 0 px2rem(13px) 0 px2rem(3px);
                                    background-image: url(../../../containers/_common_img/my-icon/local-icon.png);
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    vertical-align: middle;
                                }
                            }
                            &.time {
                                &:before {
                                    content: '';
                                    display: inline-block;
                                    width: px2rem(24px);
                                    height: px2rem(24px);
                                    margin: 0 px2rem(10px) 0 0;
                                    background-image: url(../../../containers/_common_img/my-icon/time-icon.png);
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    vertical-align: middle;
                                }
                            }
                            &.price-box{
                                position: absolute;
                                bottom: px2rem(32px);
                                right: px2rem(30px);
                                .price{
                                    color: $orange;
                                    font-size: px2rem(28px);
                                }
                            }
                        }
                    }
                    .status {
                        float: left;
                        display: inline-block;
                        border-radius: 4px;
                        color: #ffffff;
                        margin-left: 0.12rem;
                        font-size: 0.22rem;
                        padding: 0.05rem 0.1rem;
                        &.style100 {
                            background-color: $blue;
                        }
                        &.style101 {
                            background-color: $orange;
                        }
                        &.style102 {
                            background-color: $blue;
                        }
                        &.style103 {
                            background-color: #ccc;
                        }
                        &.style104 {
                            background-color: #ccc;
                        }
                    }
                }
                .act-footer {
                    height: px2rem(88px);
                    border-top: 1px solid $light-border-color;
                    & > div {
                        float: left;
                    }
                    .avatar-box {
                        margin-top: px2rem(12px);
                    }
                    .master-name {
                        line-height: px2rem(88px);
                    }
                    .price-box {
                        float: right;
                        margin-right: px2rem(30px);
                        line-height: px2rem(88px);
                        span {
                            color: $orange;
                            &.price {
                                margin: 0 px2rem(5px);
                                font-size: px2rem(36px);
                            }
                        }
                    }
                }
            }

        }
        .fans-list{
            padding-left: px2rem(30px);
            background-color: #fff;
            li{
                padding:px2rem(30px);
                padding-left:0;
                border-bottom:1px solid $light-border-color;
                @extend .clearfix;
                .avatar-box{
                    float: left;
                    img{
                        width: px2rem(105px);
                        height: px2rem(105px);
                    }
                }
                .info{
                    margin-left: px2rem(40px);
                    h5{
                        font-size: px2rem(30px);
                        margin: px2rem(10px) 0 px2rem(20px);
                    }
                    p{
                        color: $text-color-9;
                        em{
                            display: inline-block;
                            width: px2rem(100px);
                            color: $text-color-3;
                        }
                    }
                }
            }
        }

    }
}